<template>
  <div class="full_return_center_new_record">
    <c-title :hide="false" :text="'权益补贴进度'"></c-title>
    <div class="list" v-for="item in record" :key="item.id">
      <div class="title">权益队列{{ item.id }}</div>
      <div class="line">
        <div class="left">额度进度</div>
        <!-- <div class="right">10</div> -->
      </div>
      <div class="line">
        <div class="left">总分红金额：</div>
        <div class="right">{{ item.amount_all }}元</div>
      </div>
      <div class="line">
        <div class="left">已分红额度：</div>
        <div class="right">{{ item.amount_finish }}元</div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "../../../../utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      page: 1,
      record: [],
      isLoadMore: true,
      last_page: 0 //总页数
    };
  },
  methods: {
    init() {
      this.page = 1;
      this.record = [];
      this.isLoadMore = true;
      this.last_page = 0;
    },
    getData() {
      $http.get("plugin.full-reward.frontend.queue.detail", {}, "").then(
        response => {
          if (response.result == 1) {
            console.log(response.data);
            this.record = response.data.data;
            this.isLoadMore = true;
            this.last_page = response.data.last_page;
            if (!this.last_page) {
              this.last_page = 0;
            }
          } else {
            this.$toast(response.msg);
          }
        },
        function(response) {
          this.$toast(response.msg);
        }
      );
    },
    getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      let json = {
        page: this.page
      };
      if (this.page >= this.last_page) {
        return;
      } else {
        this.page = this.page + 1;
        json.page = this.page;
        $http
          .get("plugin.full-reward.frontend.queue.detail", json, "加载中")
          .then(response => {
            this.isLoadMore = true;
            if (response.result === 1) {
              this.record = this.record.concat(response.data.data);
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
              return;
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  },
  activated() {
    this.init();
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
.full_return_center_new_record {
  padding-bottom: 2rem;
}

.list {
  margin-top: 0.5rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;

  .title {
    text-align: left;
    margin-bottom: 0.5rem;
  }

  .line {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }

  .line:last-child {
    margin-bottom: 0;
  }
}
</style>
